<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">角色管理</h3>

        <div class="box-tools pull-right">
            <div class="input-group" style="width: 300px">
                <input type="text" id="serachNameId" class="form-control" placeholder="用户名">
                <span class="input-group-btn">
                 <button class="btn btn-default glyphicon glyphicon-search findUsernameBtn" type="button" style="top: 0px;"></button>
      </span>
                <span class="input-group-btn">
                 <button class="btn btn-default btn-add" type="button" style="top: 0px;">添加</button>
      </span>
            </div>
        </div>
        <!-- /.box-tools -->
    </div>
    <!-- /.box-header -->
    <div class="box-body no-padding">

        <div class="table-responsive mailbox-messages">
            <table class="table table-hover table-striped">
                <thead>
                <th>序号</th>
                <th>角色名称</th>
                <th>备注</th>
                <th>创建时间</th>
                <th>修改时间</th>
                <th>创建用户</th>
                <th>修改用户</th>
                <th>操作</th>
                </thead>
                <tbody id="tbodyID">
                <tr>
                    <td colspan="9">数据正在加载中……</td>
                </tr>
                </tbody>
            </table>
            <!-- /.table -->
        </div>
        <!-- /.mail-box-messages -->
    </div>
    <!-- /.box-body -->
    <div class="box-footer no-padding">
        <div class="mailbox-controls">
            <!-- Check all button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-sm deleteBtn"><i class="fa fa-trash-o"></i></button>
            </div>
            <!-- /.btn-group -->
            <button type="button" class="btn btn-default btn-sm refreshBtn"><i class="fa fa-refresh"></i></button>
            <div id="pageID" class="pull-right">
                <!-- 自己写一个分页-->
            </div>
            <!-- /.pull-right -->
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#pageID").load("/doPageUI", doGetObjects);
        // $(".refreshBtn").click(function () {doGetObjects()});
        //   $("#tbodyID").on("click",".btn-valid",doValidById);
        $(".input-group-btn").on("click",".btn-add",doLoadEditUI);
        $(".input-group").on("click",".findUsernameBtn",doQueryObjects);
        //    $(".input-group-btn").on("click",".btn-update",doLoadEditUI);
        $("tbody").on("click",".btn-delete",doDeleteObject).on("click",".btn-update",doLoadEditUI);
        $(".refreshBtn").click(function () {
            doGetObjects();
        })
    })
    function doLoadEditUI() {
        var title;
        if ($(this).hasClass("btn-add"))
        {title="添加角色"}else
        if ($(this).hasClass("btn-update")){
            title="修改角色";
            //获取当前行的id
            var id=$(this).parents("tr").data("id");
            var url="/role/doFindObjectById";
            var params={id:id};
            $.getJSON(url,params,function (result) {
                if (result.state==1){
                    $("#mainID" ).data("rowData",result.data);
                }else {
                    alert(result.message);
                }
            })
        }
        $("#mainID").load("/role/role_edit",function () {
            $(".box-title").html(title);
        })
    }
    function doQueryObjects() {
        //因为模糊查询用户之后默认要显示第一页
        $("#pageID").data("pageCurrent",1);
        doGetObjects();
    }
    function doDeleteObject() {
        var id=$(this).parents("tr").data("id");
        var params={id:id};
        var url="/role/doDeleteObject";
        $.post(url,params,function (result) {
            if (result.state==1){
                alert("删除成功！");
                //重新加载页面
                doGetObjects();
            }else {
                alert(result.message);
            }
        })
    }
    function doGetObjects() {
        var url="/role/doFindPageObjects";//url
        //获取页码值 实现分页行为点击刷新效果实现
        var pageCurrent=$("#pageID").data("pageCurrent");
        if (!pageCurrent)pageCurrent=1;
        var params={pageCurrent:pageCurrent};//页码
        //将name的值准备好
        var username=$("#serachNameId").val();
        if (username)
            //增加参数
            params.name=username;
        console.log(params);

        $.getJSON(url,params,function (result) {
            if (result.state==1){
                doSetTableBodyRows(result.data.records);
                //加载分页信息
                doSetPage(result.data);
            }else {
                alert(result.message);
            }
        })
    }
    function  doSetTableBodyRows(records) {
        var tbody=$("#tbodyID");
        tbody.empty();
        //增强for循环的遍历方式
        for (var i in records){
            var tr = $("<tr></tr>");
            var tds = doCreatTds(records[i],i);
            //给当前行 绑定对应的数据

            tr.append(tds);
            //加载分页信息数据 同时绑定id，为了后期删除和修改i
            tr.data("id",records[i].id);
            tbody.append(tr);
        }
    }
    function doCreatTds(row,i) {
        var tds="<td>"+(parseInt(i)+1)+"</td>"+
            "<td>"+row.name+"</td>"+
            "<td>"+row.note+"</td>"+
            "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
            "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
            "<td>"+row.createdUser+"</td>"+
            "<td>"+row.modifiedUser+"</td>"+
            "<td><button class='btn-delete'>删除</button>&nbsp;<button class='btn-update'>修改</button></td>";
        return tds;
    }
</script>